<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>切换城市</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="/themes/wnsc_moblie/newMobile/Index/css/choose_city.css"/>
		<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

		<link rel="stylesheet" href="/themes/wnsc_moblie/Public/css/citypicker.css">
		<script src="/themes/wnsc_moblie/Public/js/citypicker.js"></script>
		<style>
			.city-list p a{
				display: block;}
		</style>
	</head>

	<body>

		<body>
		<?php
				$agent = $_SERVER['HTTP_USER_AGENT'];
				if(strpos($agent,"Html5Plus") === false){
			?>
			<!-- 店家 -->
			<header>
				<div class="headerbox">
					<a class="left3" href="javascript:history.go(-1)">
						<img src="/themes/wnsc_moblie/newMobile/Index/images/left3.png" alt="">
					</a>

					<span>切换城市</span>
				</div>
			</header>

			<div style="height:50px;">

			</div>
			<?php
				}
			?>
			<div class="choose_city">
				<div id="showLetter" class="showLetter"><span>A</span></div>
				<div class="letter">
					<ul>
						<li><a href="javascript:;">A</a></li>
						<li><a href="javascript:;">B</a></li>
						<li><a href="javascript:;">C</a></li>
						<li><a href="javascript:;">D</a></li>
						<li><a href="javascript:;">E</a></li>
						<li><a href="javascript:;">F</a></li>
						<li><a href="javascript:;">G</a></li>
						<li><a href="javascript:;">H</a></li>
						<li><a href="javascript:;">J</a></li>
						<li><a href="javascript:;">K</a></li>
						<li><a href="javascript:;">L</a></li>
						<li><a href="javascript:;">M</a></li>
						<li><a href="javascript:;">N</a></li>
						<li><a href="javascript:;">P</a></li>
						<li><a href="javascript:;">Q</a></li>
						<li><a href="javascript:;">R</a></li>
						<li><a href="javascript:;">S</a></li>
						<li><a href="javascript:;">T</a></li>
						<li><a href="javascript:;">W</a></li>
						<li><a href="javascript:;">X</a></li>
						<li><a href="javascript:;">Y</a></li>
						<li><a href="javascript:;">Z</a></li>
					</ul>
				</div>
				<div class="container">
					<div class="city">
						<foreach name="city_settlesRes" item="v" key="k">
						<div class="city-list"><span class="city-letter" id="{$k}1">{$k}</span>
							<foreach name="v" item="value" key="key">
								<p data-id="{$value.city_id}"><a href="{:U('index/subsite',array('id'=>$value['city_id']))}">{$value.city_name}</a></p>
							</foreach>


						</div>
						</foreach>
					</div>
				</div>
				<!--<foreach name="store_arr" item="v">-->
				<!---->
					<!--<a href="{:U('index/subsite',array('id'=>$v['city']))}"><p>{$v['city_name']}</p></a>-->
			<!---->
				<!--</foreach>-->
				
			</div>

		</body>

		<script>
            $(function () {
                //加载城市事件
                $('.container').show();

               //点击索引查询城市
                $('body').on('click', '.letter a', function () {
                    var s = $(this).html();
                    $(window).scrollTop($('#' + s + '1').offset().top-50);
                    $("#showLetter span").html(s);
                    $("#showLetter").show().delay(500).hide(0);
                });
                //中间的标记显示
                $('body').on('onMouse', '.showLetter span', function () {
                    $("#showLetter").show().delay(500).hide(0);
                });

            })
		</script>
	</body>

</html>